<template>
  <div class="address">
    <Navi :fixed="true" :title="aid ? '编辑地址' : '新增地址'" />
    <div>
      <van-address-edit
        :area-list="areaList"
        :show-postal="showPostal"
        :show-delete="!!aid"
        show-set-default
        :area-columns-placeholder="['选择省', '选择市', '选择区/县']"
        :address-info="addressInfo"
        @save="save"
        @delete="deleteAddress"
      />
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
import { areaList } from "@vant/area-data";
export default {
  name: "AddAddress",
  components: {
    Navi,
  },
  data() {
    return {
      areaList,
      showPostal: true,
      aid: "",
      addressInfo: {},
    };
  },

  created() {
    this.aid = this.$route.query.aid;
    if (this.aid) {
      this.getAddressByAid();
    }
  },

  methods: {
    addAddress(content) {
      let addressInfo = { ...content };
      addressInfo.isDefault = Number(addressInfo.isDefault);
      console.log(addressInfo.country);
      delete addressInfo.country;
      this.axios({
        method: "post",
        url: "/addAddress",
        data: addressInfo,
      }).then((result) => {
        this.$toast(result.data.msg);
        if (result.data.code === 700) {
          this.$router.push({ name: "Login" });
          return;
        }
        if (result.data.code === 9000) {
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }
      });
    },

    editAddress(content) {
      let addressInfo = {
        ...content,
        aid: this.aid,
      };

      delete addressInfo.country;

      let isModify = false;
      for (let key in addressInfo) {
        if (addressInfo[key] !== this.addressInfo[key]) {
          isModify = true;
        }
      }

      if (!isModify) {
        this.$toast("尚未修改地址");
        return;
      }

      addressInfo.isDefault = Number(addressInfo.isDefault);

      this.axios({
        method: "post",
        url: "/editAddress",
        data: addressInfo,
      })
        .then((result) => {
          this.$toast(result.data.msg);
          if (result.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === 30000) {
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        })
        .catch((err) => {
        });
    },
    save(content) {
      if (this.aid) {
        this.editAddress(content);
      } else {
        this.addAddress(content);
      }
    },

    getAddressByAid() {
      this.axios({
        method: "get",
        url: "/findAddressByAid",
        params: {
          aid: this.aid,
        },
      })
        .then((result) => {
          if (result.data.code === 700) {
            this.$toast(result.data.msg);
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === 40000) {
            let data = result.data.result[0];
            data.isDefault = Boolean(data.isDefault);
            this.addressInfo = data;
          }
        })
        .catch((err) => {
        });
    },

    deleteAddress() {
      this.axios({
        method: "post",
        url: "/deleteAddress",
        data: {
          aid: this.aid,
        },
      })
        .then((result) => {
          this.$toast(result.data.msg);

          if (result.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }
          if (result.data.code === 10000) {
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        })
        .catch((err) => {
        });
    },
  },
};
</script>

<style lang="less" scoped>
.address {
  padding-top: 46px;

  /deep/ .van-switch--on {
    background-color: #0c34ba;
  }

  /deep/ .van-button--danger {
    background-color: #0c34ba;
    border-color: #0c34ba;
  }
}
</style>